<template>

<div class="giftCenter">

<SearchTop></SearchTop>
<bindPhone></bindPhone>
<Footer></Footer>

<div class="giftCenterMain clearfix">
	<div class="giftBanner">
		<div class="bannersLeft"> 
				<slider v-bind:sliderList="banners" ></slider>
		</div>

		<div class="bannersRight">
			<div class="title">
				<a class="hotGift">推荐礼包</a>
				<a class="change" @click="changeArr(hotGiftList)"> <span></span>换一换</a>
			</div>
			<div class="giftList">
				<div class="giftItem" v-for="(item,index) in hotGiftListC" >
					<div class="itemImg">
						<img :src="item.imageMybag" alt="">
					</div>
					<div class="itemText">
						<p>{{item.name}}</p> 
						<p>{{item.type | giftType}}</p>
						<p>还剩{{item.surplusNumber}}个 <a @click="goGiftDeta(item.code)" class="getGift">领取礼包</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="newGift ">
		<div class="newGiftTitle">
			<searchTitle text="新游礼包" imgUrl="../../../static/img/newGIft.png"></searchTitle>
		</div>
		<div class="newGiftList ">

			<a class="newGiftSave" v-for="(item,index) in newGiftList" @click="goGiftDeta(item.code)">
				<div class="itemImg">
					<img :src="item.image" alt="">
					<div class="title">
						<p>剩余{{item.bag.surplusNumber}}个</p>
						<p>{{item.bag.endTime}}</p>
					</div>
				</div>
				<div class="text">
					<p class="textTitle">{{item.name}}</p>
					<p class="getGift">
						<span> {{item.type | giftType}}</span>
						<a @click="goGiftDeta(item.code)">领取礼包</a>
					</p>
				</div>
			</a>
		</div>
	</div>
	<div class="allGift">
		<div class="allGiftTitle">
			<searchTitle text="全部礼包" imgUrl="../../../static/img/newGIft.png"></searchTitle>
		</div>
		
        	<div class="newGiftList">
        		 <div v-if="!flag" class="searchNoGame">
                    <div class="noGame">
                        <div class="noGameImg"></div>
                        <p >非常抱歉，没有找到您想要的内容</p>
                    </div>
                </div>
        	<div class="mainList"  v-if="flag">
				<a class="newGiftSave" v-for="(item,index) in allGiftList" @click="goGiftDeta(item.code)">
					<div class="itemImg">
						<img :src="item.imageCenter" alt="">
						<div class="title">
							<p>剩余{{item.surplusNumber}}个</p>
							<p>{{item.endTime}}</p>
						</div>
					</div>
					<div class="text">
						<p class="textTitle">{{item.name}}</p>
						<p class="getGift">
							<span>{{item.type | giftType}}</span>
							<a @click="goGiftDeta(item.code)">领取礼包</a>
						</p>
					</div>
				</a>
			</div>
        </div>

	</div>

	
</div>
		<newPage v-if="flag" @getAllGift="getAllGift"></newPage>

</div>
	
</template>
<style scoped lang="less" src="./style.less"></style>


<style lang="less"> // 全局样式 去掉scoped 为了控制子组件轮播图的样式

@import "../../common/base.less"; 
    .bannersLeft {
        .px2rem(width, 833);
        .px2rem(height, 330);
         position: relative;
         float:left;
        .slider {
            .px2rem(width, 833);
        .px2rem(height, 330);
            .carousel {
                .px2rem(width, 833);
        		.px2rem(height, 330);
                .carousel-inner {
                    .item {
                        .px2rem(width, 833);
        				.px2rem(height, 330);
                        img {
                           .px2rem(width, 833);
        				   .px2rem(height, 330);
                        }
                    }
                } // 轮播图图标的样式
                .carousel-indicators {
                    .px2rem(bottom, -10);
                    li {
                        .px2rem(width, 10);
                        .px2rem(height, 10);
                        .px2rem(margin-left, 3);
                        .px2rem(margin-right, 3);
                        background: #B2BCC6;
                        border: none;
                    }
                    .active {
                        .px2rem(width, 10);
                        background: #B12D44;
                        position: relative;
                        .px2rem(top,-2);
                        
                    }
                }

                .carousel-control{ // 控制上下样式
                	.px2rem(width,18);
                	.px2rem(height,48);
                	position:absolute;
                	top:50%;
  					transform: translateY(-50%);
  					opacity: 1;
                    filter: alpha(opacity=100);
                }
                .left{
                	.px2rem(height,88);
                    .px2rem(width,34);
                	background:url("../../../static/img/last.png");
                	background-size:100% 100%;
                }
                 .left:hover{
                	background:url("../../../static/img/lastHover.png");
                	background-size:100% 100%;
                }
                .right{
                	.px2rem(height,88);
                    .px2rem(width,34);
					background:url("../../../static/img/next.png");
                	background-size:100% 100%;
                }
                  .right:hover{
					background:url("../../../static/img/nextHover.png");
                	background-size:100% 100%;
                }
            }
        }
    }
</style>
<script src="./script.js"></script>
